<template>
	<view class="add-recommend-wrap">
		<view class="case header bg-white clear">
			<image :src="`${host}/${recommendData.img}`" class="cover pull-left" mode="aspectFill"></image>
			<view class="info pull-left">
				<text class="block name">{{recommendData.title}}</text>
				<text class="block location text-overflow">
					<text class="iconfontPT icondingwei2 location-icon"></text>
					{{recommendData.address}}
				</text>
				<text class="block date">
					<text class="iconfontPT iconhuodongshijian activity-start-date-icon"></text>
					{{recommendData.s_time}}
					<text>—</text>
					{{recommendData.e_time}}
				</text>
			</view>
		</view>
		<view class="case service-date bg-white">
			<view class="title bold">
				服务时间
			</view>
			<view class="flex-x-between">
				<view class="item start-date inline-block text-center">
					<picker mode="date" fields="day" :value="date" :start="startDate" :end="endDate" @change="handleStartDateChange">
						<view class="picker" v-if="form.startDate">
							{{form.startDate}}
						</view>
						<view class="placeholder" v-else>
							开始时间
						</view>
					</picker>
				</view>
				<text>——</text>
				<view class="item end-date inline-block text-center">
					<picker mode="date" fields="day" :value="date" :start="startDate" :end="endDate" @change="handleEndDateChange">
						<view class="picker" v-if="form.endDate">
							{{form.endDate}}
						</view>
						<view class="placeholder" v-else>
							结束时间
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="case banner bg-white">
			<view class="title bold">
				推荐主图
			</view>
			<view class="img">
				<view class="cover-image-wrap w100 h100 relative" @click="handleChooseImage">
					<view class="image-item inline-block relative w100 h100" v-if="form.cover.length">
						<image class="image w100 h100" :src="`${qiniuHost}/${form.cover}`" mode="aspectFill"></image>
						<text class="replace x-y-center">点击替换</text>
					</view>
					<view class="choose-image x-y-center text-center" v-else>
						<text class="iconfontPT icontupian02 block"></text>
						<text class="text">上传图片</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="amount-wrap flex-x-between bg-white">
				<text class="title bold">
					服务费用
				</text>
				<text class="amount theme bold">
					￥{{form.price}}
				</text>
			</view>
			<view class="btn">
				<button class="confirm-btn" hover-class="hoverClass" @click="handlePurchase">
					购买服务
				</button>
			</view>
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
	</view>
</template>

<script>
	import {
		payment,
		addRecommend,
		setMyRecommend
	} from '../../../apis/personal/index.js';

	export default {
		data() {
			return {
				recommendData: {},
				startDate: '2020-07-10',
				endDate: '2022-07-10',
				form: {
					startDate: '',
					endDate: '',
					cover: '',
					price: 0
				},
				list: [],
				rules: {
					startDate: [{
						required: true,
						message: '请选择服务开始时间',
					}],
					endDate: [{
						required: true,
						message: '请选择服务结束时间',
					}],
					cover: [{
						required: true,
						message: '请选择封面',
					}],
				}
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		computed: {
			host() {
				return this.$baseHost.car
			},
			qiniuHost() {
				return this.$baseHost.qiniuHost
			}
		},
		onShow() {
			this.getRecommend()
		},
		methods: {
			getRecommend() {
				this.$loading.show()

				setMyRecommend({
					item_id: this.id
				}).then(res => {
					this.$loading.hide()
					this.recommendData = res.data.organization
					this.list = res.data.config

					let s = '',
						e = '',
						currentDate = this.$moment(new Date()).format('YYYY-MM-DD'),
						currentMonth = currentDate.split('-')[1];

					this.list.forEach((item, i) => {
						currentMonth == item.s_time.split('-')[1] && (s = item.days)
						e = (item.e_time > (this.list[i + 1] ? this.list[i + 1].e_time : '')) ? item.e_time : this.list[i + 1].e_time
					})

					this.startDate = this.$moment(currentDate).getSomeDate(s, 'day')
					this.endDate = e
				})
			},
			handleChooseImage() {
				let _this = this
				this.$uploadImage({
						imageCompressFn: this.$refs.imageCompress.start,
						uploadUrl: `${this.$baseHost.car}/api/common/upImage`,
					})
					.then(response => {
						_this.form.cover = response;
					})
			},
			handleStartDateChange(e) {
				this.form.startDate = e.detail.value
				this.form.price = 0
				this.form.endDate && this.computedPrice(this.list, this.form.startDate, this.form.endDate)
			},
			handleEndDateChange(e) {
				if (this.$moment(this.form.startDate).isAfter(e.detail.value)) {
					return uni.showModal({
						title: '提示',
						content: '开始时间应该在结束时间之前!'
					});
				}
				this.form.endDate = e.detail.value
				this.form.price = 0
				this.form.endDate && this.computedPrice(this.list, this.form.startDate, this.form.endDate)
			},
			computedPrice(list, startDate, endDate) {
				const getDateSpan = (s, e) => {
					return this.$moment(s).getDateSpan(e)
				}

				// 筛选最小项
				const getMinItem = startDate => {
					let min = {
							s_time: '2000-01-01',
							e_time: '2050-01-01'
						},
						next = 0;
					list.forEach((item, i) => {
						getDateSpan(list[i].s_time, startDate) < (next ? next : getDateSpan(min.s_time, min.e_time)) &&
							(next = getDateSpan(list[i].s_time, startDate)) && (min = list[i])
					})
					return min
				}
				const judge = startDate => {
					let minItem = getMinItem(startDate)

					const computePrice = endDate => {
						this.form.price += (getDateSpan((minItem.s_time > startDate ? minItem.s_time : startDate), endDate) + 1) *
							minItem
							.money
					}
					if (endDate <= minItem.e_time) {
						computePrice(endDate)
					} else {
						computePrice(minItem.e_time)
						judge(minItem.e_time)
					}
				}

				judge(startDate)
			},
			handlePurchase() {
				let _this = this,
					startDate = this.form.startDate,
					endDate = this.form.endDate,
					params = {
						item_id: this.id,
						item_name: this.recommendData.title,
						recommend_image: this.form.cover,
						s_date: startDate,
						e_date: endDate,
						type: 3,
						price: this.form.price,
					};

				this.$verification(this.form, this.rules, ok => {
					if (ok) {
						_this.$loading.show()
						addRecommend(params).then(res => {
							if (+res.code === 200) {
								_this.$loading.hide()
								const $params = {
									total_money: _this.form.price,
									district_money: 0,
									// pay_money: _this.form.price,
									pay_money: 1,
									coupon_id: 0,
									r_id: res.data,
									item_id: _this.id,
									store_id: 0,
									factory_id: uni.getStorageSync('factory_id') ? uni.getStorageSync('factory_id') : 1,
									type: 6,
									order_title: `${_this.recommendData.title}上推荐`,
									num: 0,
									goods_id: _this.id,
									img: _this.form.cover,
								}
								payment($params).then(res => {
									if (res.code == 1) {
										uni.requestPayment({
											appId: res.data.appId,
											nonceStr: res.data.nonceStr,
											package: res.data.package,
											paySign: res.data.paySign,
											signType: res.data.signType,
											timeStamp: res.data.timeStamp,
											success(res) {
												uni.showToast({
													title: '支付成功！',
													icon: 'success'
												})
												uni.navigateBack({
													delta: 1
												})
											},
											fail(res) {}
										})
									}
								})

							}
						})
					}
				})
			},
		},
	}
</script>

<style lang="less">
	.add-recommend-wrap {
		background: #f8f8f8;
		padding: 20rpx 0;
		height: 100vh;

		.placeholder {
			color: #999999;
		}

		.case {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;

			.title {
				padding: 30rpx 0;
				font-size: 30rpx;
				box-sizing: border-box;
				color: #333333;
			}
		}

		.header {
			padding-top: 30rpx;
			padding-bottom: 30rpx;

			.cover {
				width: 186rpx;
				height: 140rpx;
				border-radius: 10rpx;
			}

			.info {
				width: 505rpx;
				padding-left: 20rpx;
				box-sizing: border-box;

				.iconfontPT {
					font-size: 26rpx;
					margin-right: 10rpx;
				}

				.name {
					font-size: 34rpx;
					margin-bottom: 10rpx;
				}

				.location {
					font-size: 24rpx;
					color: #999999;
					margin-bottom: 10rpx;
				}

				.date {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.service-date {
			padding-bottom: 30rpx;

			.item {
				width: 300rpx;
			}
		}

		.banner {
			padding-bottom: 30rpx;

			.img {
				height: 345rpx;
				color: #ffffff;
				font-size: 26rpx;
				background: #f8f8f8;

				.replace {
					background: rgba(0, 0, 0, .2);
					padding: 15rpx 25rpx;
					border-radius: 5rpx;
				}

				.choose-image {
					width: 178rpx;
					height: 178rpx;
					background: #FF9187;
					border-radius: 100%;
					padding-top: 50rpx;
					box-sizing: border-box;

					.iconfontPT {
						color: #ffffff;
						margin-bottom: 15rpx;
					}
				}
			}
		}

		.footer {

			.amount-wrap {
				padding: 30rpx 30rpx;
				margin-bottom: 40rpx;
			}

			.btn {
				.confirm-btn {
					color: #ffffff;
					width: 690rpx;
					height: 90rpx;
					background: rgba(228, 24, 5, 1);
					border-radius: 16rpx;
				}
			}
		}
	}
</style>
